<template>
  <div class="container">
    <div class="item" v-for="item in classArr1" :key="item">
      <div class="chunk" :class="[item]">
        <span>{{ item }}</span>
      </div>
    </div>

    <div class="item" v-for="item in classArr2" :key="item">
      <p class="txt" :class="[item]">{{ item }}</p>
    </div>
  </div>
</template>

<script setup>
const classArr1 = ['circular', 'circular-lt', 'circular-rt', 'circular-lb', 'circular-rb', 'slide', 'slide-l', 'slide-t', 'slide-r', 'slide-b']
const classArr2 = ['bars-l', 'bars-r', 'bars-lr']
</script>

<style lang="scss" scoped>
.container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 20px;
  padding: 20px;
}

.item {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100px;
  background-color: #616161;
}

.chunk {
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  width: 100px;
  height: 50px;
  background-color: #2b2b2b;
  font-weight: 400;
  color: #fff;
  overflow: hidden;
}

.txt {
  cursor: pointer;
  color: #fff;
}
</style>